<template>
  <div v-show="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail" height="calc(100vh - 200px)">
      <div style="display: flex; justify-content: space-between; margin-top: 16px">
        <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
        <px-button v-if="props.isInventory && isStartFlag" type="primary" plain @click="startInventory">开始盘点</px-button>
        <div v-else-if="props.isInventory && !isStartFlag" style="display: flex; align-items: center; justify-content: center; color: #10b981">
          <div style="width: 8px; height: 8px; margin-right: 8px; background: #10b981; border-radius: 8px" />
          盘点执行中
        </div>
      </div>
      <EditDropDownLight dropdownTitle="盘点基本详情">
        <template v-slot:content>
          <div class="view-equip-wrap">
            <div class="view-equip-content">
              <div class="view-equip-item">
                <div class="label">盘点名称</div>
                <div class="text">{{ formValue.takeStockName }}</div>
              </div>
              <div class="view-equip-item">
                <div class="label">盘点编码</div>
                <div class="text">{{ formValue.takeStockCode }}</div>
              </div>
              <div class="view-equip-item">
                <div class="label">所属计划编码</div>
                <div class="text">{{ formValue.takePlanCode }}</div>
              </div>
            </div>
            <div class="view-equip-content">
              <div class="view-equip-item">
                <div class="label">科室</div>
                <div class="text">{{ formValue.classNameDesc }}</div>
              </div>
              <div class="view-equip-item">
                <div class="label">盘点负责人</div>
                <div class="text">{{ formValue.takeStockPeopleName }}</div>
              </div>
              <div class="view-equip-item">
                <div class="label">任务计划时间</div>
                <div class="text">{{ formValue.planStartDate }} - {{ formValue.planEndDate }}</div>
              </div>
            </div>
            <div class="view-equip-content">
              <div class="view-equip-item">
                <div class="label">执行状态</div>
                <div class="text">{{ formValue.executeStatusDesc }}</div>
              </div>
              <div class="view-equip-item">
                <div class="label">盘点范围</div>
                <div class="text">
                  {{ formValue.takeStockScope === "all" ? "全面盘点" : "指定盘点" }}
                </div>
              </div>
              <div class="view-equip-item">
                <div class="label">备注</div>
                <div class="text">{{ formValue.remark }}</div>
              </div>
            </div>
          </div>
        </template>
      </EditDropDownLight>
      <EditDropDownLight dropdownTitle="盘点工具列表">
        <template v-slot:content>
          <px-form ref="toolRef" :model="formValue" scroll-to-error>
            <px-table
              :data="formValue.toolInfoDTOList"
              class="equip-table"
              :class="props.isInventory && !isStartFlag ? 'table-edit' : ''"
              size="small"
              border
            >
              <px-table-column prop="toolCode" label="工具编码" min-width="80" show-overflow-tooltip />
              <px-table-column prop="toolName" label="工具名称" min-width="80" show-overflow-tooltip />
              <px-table-column prop="toolStatusDesc" label="工具状态" min-width="80" show-overflow-tooltip>
                <template #default="scope">
                  <px-tag
                    effect="plain"
                    :style="{
                      color: 'rgba(0, 0, 0, 0.8)',
                      border: `1px solid ${tagBorderColorList[scope.row.toolStatus]}`,
                      backgroundColor: `${tagBgColorList[scope.row.toolStatus]}`
                    }"
                  >
                    {{ scope.row.toolStatusDesc }}
                  </px-tag>
                </template>
              </px-table-column>
              <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="80" show-overflow-tooltip />
              <px-table-column prop="toolUnitDesc" label="工具单位" min-width="80" show-overflow-tooltip />
              <px-table-column prop="toolModel" label="型号/规格" min-width="80" show-overflow-tooltip />
              <px-table-column prop="brandVal" label="品牌" min-width="80" show-overflow-tooltip />
              <px-table-column prop="toolPosition" label="工具位置" min-width="100" show-overflow-tooltip />
              <px-table-column v-if="props.isInventory && !isStartFlag" label="盘点结果" min-width="130" show-overflow-tooltip>
                <template #default="scope">
                  <px-form-item
                    :prop="'toolInfoDTOList.' + scope.$index + '.takeStockResult'"
                    :rules="[{ required: true, message: '盘点结果不能为空', trigger: 'change' }]"
                  >
                    <px-radio-group v-model="scope.row.takeStockResult" @change="changeResult">
                      <px-radio :label="1">正常</px-radio>
                      <px-radio :label="0">异常</px-radio>
                    </px-radio-group>
                  </px-form-item>
                </template>
              </px-table-column>
              <px-table-column v-else label="盘点结果" min-width="80" show-overflow-tooltip>
                <template #default="scope">
                  <div v-if="scope.row.takeStockResult === 1">正常</div>
                  <div v-else-if="scope.row.takeStockResult === 0" class="abnormal">异常</div>
                  <div v-else>-</div>
                </template>
              </px-table-column>
              <px-table-column v-if="props.isInventory && !isStartFlag" min-width="140" label="异常原因">
                <template #default="scope">
                  <px-form-item
                    :prop="'toolInfoDTOList.' + scope.$index + '.unusualCause'"
                    :rules="[{ required: scope.row.takeStockResult === 0, message: '异常原因不能为空', trigger: 'blur' }]"
                  >
                    <px-input v-model="scope.row.unusualCause" placeholder="请填写异常原因" maxlength="50" />
                  </px-form-item>
                </template>
              </px-table-column>
              <px-table-column v-else label="异常原因" min-width="140" show-overflow-tooltip />
            </px-table>
          </px-form>
        </template>
      </EditDropDownLight>
    </px-scrollbar>
    <div v-show="props.isInventory && !isStartFlag" class="info-form-btns">
      <px-button @click="backMainPage">取消</px-button>
      <px-button type="primary" plain @click="handleSubmit(toolRef, 'part')">暂存</px-button>
      <px-button type="primary" @click="handleSubmit(toolRef, 'all')">提交</px-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getToolInventory, saveToolInventory, startTool } from "@/api/equip/toolManage";
import EditDropDownLight from "@/views/all/equip/components/EditDropDownLight.vue";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs, watch } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "isInventory", "inventoryId"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);

const state = reactive<any>({
  formValue: {
    id: "",
    takeStockName: "",
    takeStockCode: "",
    classNameDesc: "",
    takeStockPeopleName: "",
    planStartDate: "",
    planEndDate: "",
    executeStatusDesc: "",
    remark: "",
    takeStockScope: "all",
    toolInfoDTOList: []
  },
  isStartFlag: true
});
const { formValue, isStartFlag } = toRefs(state);

const toolRef = ref();

const tagBorderColorList = {
  0: "#4CCBA1",
  1: "#F37272",
  2: "#F7B648",
  3: "#7997A8"
};

const tagBgColorList = {
  0: "#E8F8F3",
  1: "#FEECEC",
  2: "#FEF5E6",
  3: "#F7F7F7"
};

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    const data = await getToolInventory(props.inventoryId);
    formValue.value = data;
    if (props.isInventory) {
      if (data.executeStatus === 1) {
        // 未开始
        isStartFlag.value = true;
      } else if (data.executeStatus === 2) {
        // 执行中
        isStartFlag.value = false;
      }
    } else {
      isStartFlag.value = true;
    }
  } else {
    formValue.value = {
      id: "",
      takeStockName: "",
      takeStockCode: "",
      classNameDesc: "",
      takeStockPeopleName: "",
      planStartDate: "",
      planEndDate: "",
      executeStatusDesc: "",
      remark: "",
      takeStockScope: "all",
      toolInfoDTOList: []
    };
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
  if (props.isInventory && !isStartFlag.value) {
    emits("queryTable");
  }
};

const changeResult = val => {
  console.log(val);
};
// 开始盘点
const startInventory = async () => {
  await startTool(props.inventoryId);
  PxMessage("盘点任务激活成功");
  isStartFlag.value = false;
  formValue.value.executeStatusDesc = "执行中";
};

// 保存盘点表
const handleSubmit = async (formEl, saveType) => {
  if (!formEl) return;
  const arr = [];
  formValue.value.toolInfoDTOList?.forEach(item => {
    arr.push({
      detailId: item.detailId,
      takeStockResult: item.takeStockResult,
      unusualCause: item.unusualCause
    });
  });
  const params = {
    id: props.inventoryId,
    takeStockDetailDTOList: arr
  };
  if (saveType === "all") {
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        await saveToolInventory({ ...params, saveType });
        PxMessage.success("盘点成功！");
        emits("backMainPage");
        emits("queryTable");
      }
    });
  } else {
    await saveToolInventory({ ...params, saveType });
    PxMessage.success("暂存成功！");
    emits("backMainPage");
    emits("queryTable");
  }
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
.info-form-btns {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 68px;
  padding-right: 34px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}
:deep(.view-equip-detail .table-edit tbody .px-table__cell) {
  padding: 0;
  height: 64px;
  line-height: 64px;
  .cell {
    height: 64px;
    line-height: 64px;
    .px-form-item {
      margin-bottom: 0;
      padding-top: 16px;
    }
  }
}
</style>
